// src/routes/index.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from '../components/Home';
import About from '../components/About';
import User from '../components/User';
import Company from '../components/Company';
import Team from '../components/Team';
import temltes from '../components/custumCom'
import {  useEffect, useState } from 'react';
const AppRoutes = () => {
  console.log('temltes', temltes);
  const [RouterList, setRouterList] = useState([])
  useEffect(() => {
  let arr=[{ element:<Home />,path:'/'},{ element:<About />,path:'/about',Children:[{ element:<Company />,path:'company'},{element:<Team />,path:'team'}]},{element:<User />,path:'/user/:id'}]
 setRouterList(() => [...arr,...RouterList]);
  }, [])
  // console.log('setRouterList',RouterList);
  
  return (
    <Router>
      <Routes>
        {RouterList.map((item,i) => (
          <Route key={i} path={item.path} element={item.element}>
            {item.Children && item.Children.map((child,idx) => {
              return <Route key={idx} path={child.path} element={child.element}>  </Route>
            })}
          </Route>
       )) }
          {/* <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} >
          <Route path="company" element={<Company />} />
          <Route path="team" element={<Team />} />
        </Route >
        <Route path="/user/:id" element={<User />} /> */}
      </Routes>
    </Router>
  );
};

export default AppRoutes;